-
Notifications
You must be signed in to change notification settings - Fork 436
feat(clerk-js,ui): Introduce setup MFA session task #7626
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
🦋 Changeset detectedLatest commit: ec92505 The changes in this PR will be included in the next version bump. This PR includes changesets to release 20 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
84d9b10 to
4c19ae6
Compare
d9e893a to
4fc95f2
Compare
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260121104441 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/fastify@2.6.9-snapshot.v20260121104441 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260121104441 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260121104441 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260121104441 --save-exact |
4fc95f2 to
61862a2
Compare
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260122110524 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/fastify@2.6.9-snapshot.v20260122110524 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260122110524 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260122110524 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260122110524 --save-exact |
61862a2 to
b41bd37
Compare
b41bd37 to
d3bd99e
Compare
d3bd99e to
364549f
Compare
4cf3a16 to
0a27701
Compare
8f797de to
fd76d83
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/ui/src/components/SessionTasks/index.tsx`:
- Line 58: The ref currentTaskContainer created via useRef<HTMLDivElement>(null)
in SessionTasks is never attached to a DOM node, so currentTaskContainer.current
is always null and accessing offsetHeight yields undefined; either attach this
ref to the DOM element you intend to measure (e.g., add
ref={currentTaskContainer} to the task container div that represents the
"current/previous task" so the offsetHeight read (used to compute minHeight)
becomes valid) or remove the ref and the related minHeight computation entirely
(delete currentTaskContainer, its useRef import, and any code that reads
currentTaskContainer.current.offsetHeight).
In `@packages/ui/src/contexts/components/SessionTasks.ts`:
- Around line 60-62: The constructed navigation path can create a double-slash
when VIRTUAL_ROUTER_BASE_PATH is used and startPath begins with a slash; update
the branch in SessionTasks (the block that checks VIRTUAL_ROUTER_BASE_PATH and
calls navigate) to normalize components before building the URL—either strip a
leading slash from startPath (or trailing slash from basePath) or use a small
path-join helper to concatenate basePath, startPath, and taskEndpoint so
navigate receives a single-clean path (referencing VIRTUAL_ROUTER_BASE_PATH,
startPath, taskEndpoint, and navigate).
🧹 Nitpick comments (2)
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx (1)
72-74: Missing dependency array entries in useEffect.The effect references
preparewhich is defined inline and not memoized. While this works for the initial mount pattern, addingprepareor usinguseCallbackwould align with React best practices and avoid stale closure issues if the component re-renders.packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx (1)
271-271: Minor: Comment says "Step 3" but index is 2.The comment at line 271 says "Step 3" but the wizard step index is 2 (0-indexed). This is a cosmetic inconsistency.
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260130165100 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/fastify@2.7.0-snapshot.v20260130165100 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260130165100 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260130165100 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260130165100 --save-exact |
fd76d83 to
70f05ad
Compare
|
!snapshot |
|
Hey @octoper - the snapshot version command generated the following package versions:
Tip: Use the snippet copy button below to quickly install the required packages. npm i @clerk/agent-toolkit@0.2.9-snapshot.v20260202085507 --save-exact
npm i @clerk/astro@3.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/backend@3.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/chrome-extension@3.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/clerk-js@6.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/dev-cli@1.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/expo@3.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/expo-passkeys@1.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/express@2.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/fastify@2.7.0-snapshot.v20260202085507 --save-exact
npm i @clerk/localizations@4.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/msw@0.0.1-snapshot.v20260202085507 --save-exact
npm i @clerk/nextjs@7.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/nuxt@2.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/react@6.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/react-router@3.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/shared@4.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/tanstack-react-start@1.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/testing@2.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/ui@1.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/upgrade@2.0.0-snapshot.v20260202085507 --save-exact
npm i @clerk/vue@2.0.0-snapshot.v20260202085507 --save-exact |
nikosdouvlis
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good! Just a few questions
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/TOTPCodeFlowScreen.tsx
Show resolved
Hide resolved
f11d8c0 to
85d4c2a
Compare
f6c23c4 to
433ff6c
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In
`@packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx`:
- Around line 33-39: The boolean expression for hasOtherIdentifications accesses
user.username without optional chaining and can throw in strict mode; update the
check to use optional chaining like the other checks (change user.username !==
null to user?.username !== null) inside the hasOtherIdentifications computation
so it safely handles user being null/undefined.
packages/ui/src/components/SessionTasks/tasks/TaskSetupMfa/SmsCodeFlowScreen.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@packages/localizations/src/nl-BE.ts`:
- Around line 367-373: The nl-BE localization is missing three nested strings
under taskSetupMfa which cause runtime lookups to fail; add Dutch translations
for taskSetupMfa.badge (map to something like "Tweestapsverificatie instellen"),
taskSetupMfa.signOut.actionLink (translate "Sign out" to "Afmelden") and
taskSetupMfa.signOut.actionText (translate "Signed in as {{identifier}}" to
"Aangemeld als {{identifier}}") in the nl-BE file, and leave or comment on the
existing form_password_or_identifier_incorrect discrepancy (en-US undefined vs
nl-BE translated) if that inconsistency is intentional.
🧹 Nitpick comments (1)
packages/localizations/src/es-UY.ts (1)
869-872: Minor voseo inconsistency: "Únete" → "Unite"The file consistently uses voseo (e.g., "Ingresá", "Agregá", "Revisá"), but this string uses "Únete" (tú imperative). For consistency with Uruguayan Spanish, consider changing to "Unite por invitación."
Suggested fix
organizationAlreadyExists: - 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Únete por invitación.', + 'Ya existe una organización para el nombre de empresa detectado ({{organizationName}}) y {{organizationDomain}}. Unite por invitación.',
Description
This PR introduces the the screens and functionality for the new
setup-mfasession taskIf an instance has "Require multi-factor authentication" enabled, every user that does not have have MFA setup they will required to set it up on their next sign-in, also user that sign-up they will be prompted right away to perform the session task.
Sign up
CleanShot.2026-02-02.at.20.01.53.mp4
Sign in
CleanShot.2026-02-02.at.20.04.53.mp4
With other tasks
CleanShot.2026-02-02.at.20.06.27.mp4
Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change
Summary by CodeRabbit